<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .divout {
      width: 100px;
      height: 100px;
      background: yellow;
      margin-bottom: 50px;
      border: 1px solid black;
    }
    .divout1 {
      width: 50px;
      height: 50px;
      background: yellow;
      margin-top: 80px;
      /*float:left;*/
      /*position:absolute;*/
      border: 1px solid black;
    }
  </style>
  <body>
    <div>数组扁平化</div>
    <div class="divout"></div>
    <div class="divout1"></div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        arr: [
          // 需要按顺序
          { id: 4, name: "部门4", pid: 3 },
          { id: 5, name: "部门5", pid: 4 },
          { id: 1, name: "部门1", pid: 0 },
          { id: 2, name: "部门2", pid: 1 },
          { id: 3, name: "部门3", pid: 1 },
        ],
        convertArr: [],
      },
      // 关于执行顺序，敢于进行改造
      async mounted() {
        // const res = await this.hello()
        // console.log(res)
        // 不确保后续的执行顺序
        // this.hello().then(res => {
        //   console.log(res)
        // })
        // console.log('World')
        // const result = this.arrayToTree(this.arr.sort(this.compare("pid")));
        // console.log(result);
        setTimeout(function() {
            console.log(1);
        }, 0);
        console.log(2);
        this.s1()
        new Promise((resolve, reject) => {
            console.log(3);
            resolve();
            console.log(6);
        }).then(() => console.log(4))
        console.log(5);
      },
      methods: {
        hello() {
          // return new Promise(function (resolve) {
          // setTimeout(function () {
          // resolve('Hello')
          // }, 1000)
          // })
          setTimeout(function () {
            return Promise.resolve("Hello");
          }, 1000);
        },
        arrayToTree(arr) {
          const result = [];
          const itemMap = {};
          for (const item of arr) {
            const { id, pid } = item;
            if (!itemMap.id) {
              // 设置key名为id
              itemMap[id] = {
                children: [],
              };
            }

            itemMap[id] = {
              ...item,
              // children: []
              children: itemMap[id]["children"],
            };

            const treeItem = itemMap[id];
            // 判断一级
            if (pid === 0) {
              result.push(treeItem);
            } else {
              if (!itemMap[pid]) {
                itemMap[pid] = {
                  children: [],
                };
              }
              itemMap[pid].children.push(treeItem);
            }
          }
          return result;
        },
        compare(prop) {
          return function (obj1, obj2) {
            var val1 = obj1[prop];
            var val2 = obj2[prop];
            if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
              val1 = Number(val1);
              val2 = Number(val2);
            }
            if (val1 < val2) {
              return -1;
            } else if (val1 > val2) {
              return 1;
            } else {
              return 0;
            }
          };
        },
        async s1() {
          console.log(7)
          await this.s2();
          console.log(8);
        },
        s2 () {
          console.log(9);
        }
      },
    });
  </script>
</html>
